<template>
  <div class="app-container" ref="appContainer">
    <PropTable
      :columns="column"
      :data="list"
      :total="total"
      @reset="reset"
      @onSubmit="onSubmit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @exportExcelAction="exportExcelAction"
    >
      <!-- 归档状态 -->
      <template v-slot:archiveStatus="scope">
        <div v-if="!useEmpty(scope.row.archiveStatus)">
          {{ getStatusLabel(scope.row.archiveStatus) }}
        </div>
      </template>



      

      <template v-slot:operation="scope">
        <div style="display: flex; justify-content: center">
          <el-button
            v-if="
              (scope.row.archiveStatus === '0' || scope.row.archiveStatus === '3') && userStore.rolescode!=15
            "
            type="primary"
            link
            icon="Message"
            @click="archive(scope.row)"
          >
            归档
          </el-button>

          <el-button
            v-if="
              (scope.row.archiveStatus === '1' && scope.row.showStatus === '1') && userStore.rolescode!=15
            "
            type="primary"
            link
            icon="Edit"
            @click="approval(scope.row)"
          >
            复盘
          </el-button>

          <el-button
            v-if="scope.row.archiveStatus === '2' && userStore.rolescode!=15"
            type="danger"
            link
            icon="Delete"
            @click="handeleRevoke(scope.row)"
          >
            撤回
          </el-button>

          <el-button
            v-if="scope.row.archiveStatus !== '0' || userStore.rolescode==15"
            type="primary"
            link
            icon="Edit"
            @click="handleArchive(scope.row)"
          >
            详情
          </el-button>

          <el-button
            v-if="userStore.userId=='1'"
            type="primary"
            link
            icon="Edit"
            @click="deleteArchive(scope.row)" >
            删除
          </el-button>
        </div>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from "vue";
//@ts-ignore
import PropTable from "@/components/Table/PropTable/index.vue";
//@ts-ignore
import { exportExcel } from "@/utils/exprotExcel";

//@ts-ignore
import { archiveList, withdrawApi,deleteArchiveData } from "@/api/project/archive";
import { useRouter, useRoute } from "vue-router";
//@ts-ignore
import { ElMessageBox, ElMessage } from "element-plus";

//@ts-ignore
import { useEmpty, formatDate } from "@/utils/index";

import useUserStore from "../../../store/modules/user";

const userStore = useUserStore();
//@ts-ignore
const { proxy } = getCurrentInstance();

// const loading = ref(true);
const appContainer = ref(null);
const dialogVisible = ref(false);
const route = useRoute();
const router = useRouter();

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

let optionsList = [
  {
    value: "2",
    label: "归档中",
  },
  {
    value: "0",
    label: "归档驳回",
  },
  {
    value: "1",
    label: "归档成功",
  },
  {
    value: "3",
    label: "归档撤回",
  },
];

const column = [
  {
    name: "projectName",
    label: "项目名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "archiveStatus",
    label: "归档状态",
    inSearch: true,
    valueType: "select",
    options: optionsList,
    slot: true,
  },
  {
    name: "creationTime",
    label: "创建时间",
    inSearch: true,
    valueType: "datetime",
  },
  {
    name: "founder",
    label: "创建人",
  },
  { name: "operation", slot: true, fixed: "right", width: 300, label: "操作" },
];

const getStatusLabel = (value) => {
  let matchedOption = optionsList.find((option) => option.value === value);
  return matchedOption ? matchedOption.label : "";
};

const list = ref([]);

let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);

const archiveData = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (paramsSubmit) {
    for (let key in paramsSubmit) {
      if (paramsSubmit[key]) {
        params[key] = paramsSubmit[key];
      }
    }
  }
  const response = await archiveList(params);

  if (response.code === 200 && response.rows.length >= 0) {
    list.value = response.rows;
    total.value = Number(response.total);
  } else {
    ElMessage.error(response.msg);
    // console.log(err);
  }
};

const handeleRevoke = (row) => {
  ElMessageBox.confirm("确定要撤回吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (row) {
        const result = await withdrawApi(row);
        if (result.code === 200) {
          // 删除成功的提示
          ElMessage.success(result.msg);
          archiveData();
        }
      }
    })
    .catch((err) => {
      // 用户点击取消执行的操作
      ElMessage.error("取消");
    });
};

const reset = (val) => {
  val = "";
  archiveData();
};

let paramsSubmit;

const onSubmit = (val) => {
  if (val) {
    val.creationTime = formatDate(val.creationTime);
    paramsSubmit = val;
    archiveData();
  }
};

const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  archiveData();
};
const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  archiveData();
};

// 导出
const exportExcelAction = async (val) => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (val) {
    for (let key in val) {
      if (val[key]) {
        params[key] = val[key];
      }
    }
  }

  proxy.download(
    "/system/filing/export",
    params,
    `项目归档_${
      new Date().getFullYear() +
      "-" +
      new Date().getMonth() +
      1 +
      "-" +
      new Date().getDate()
    }.xlsx`
  );
};

// 项目复盘
const approval = (row) => {
  router.push({
    path: "/myProject/review/again",
    query: { archivistId: row.projectId, id: row.archivistId, name: "1" },
  });
};

// 项目归档
const archive = (val) => {
  router.push({
    path: "/myProject/archive-info/add",
    query: {
      name: 2,
      state: 1,
      archivistId: val.archivistId,
      projectId: val.projectId,
    },
  });
};

// 详情
const handleArchive = (val) => {
  router.push({
    path: "/myProject/archive-info/add",
    query: {
      name: 3,
      state: 2,
      archivistId: val.archivistId,
      projectId: val.projectId,
    },
  });
};

//删除
const deleteArchive = async (val)=>{
   ElMessageBox.confirm("确定删除该项目归档吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let response = await deleteArchiveData(val.archivistId);
    if (response.code === 200) {
      // 删除成功的提示
        ElMessage.success(response.msg);
        archiveData();
    } else {
      ElMessage.error(response.msg);
    }
  });
}

onMounted(() => {
  archiveData();
});
</script>
<style>
.el-dialog {
  background-color: #f0f2f5;
}

.el-dialog__footer {
  text-align: center;
}
.converDialog {
  position: absolute;
  left: 15%;
  top: -30px;
}
.el-dialog__header {
  margin-right: 0 !important;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  /* padding-bottom: 15px !important; */
}
</style>

<style scoped lang="scss">
//   .edit-input {
//     padding-right: 100px;
//   }
//   .app-container {
//     flex: 1;
//     display: flex;
//     width: 100%;
//     /* padding: 16px; */
//     box-sizing: border-box;
//   }
//   .cancel-btn {
//     position: absolute;
//     right: 15px;
//     top: 10px;
//   }
</style>
